<template>
  <div class="settlementRule-container table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button class="gray-outline" @click="show('add')">添加结算规则</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" :bordered="{ headerCell: true, wrapper: true }" class="table-two-line" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="结算规则ID" #cell="{ record }">{{ record.shortId }}</a-table-column>
              <a-table-column title="规则名称" #cell="{ record }">{{ record.name }}</a-table-column>
              <a-table-column title="任务类型" #cell="{ record }">{{ typeMap[record.type] }}</a-table-column>
              <a-table-column title="计算方式" #cell="{ record }">{{ record.calMehtod == 1 ? '固定价格' : '服务费比例' }}</a-table-column>
              <a-table-column title="应用人员" #cell="{ record }">
                <TextLimit position="top" :rows="1" :val="getUserName(record) || '--'" />
              </a-table-column>
              <a-table-column title="创建时间" #cell="{ record }">
                {{ $setTime(record.gmtCreate, 'YYYY-MM-DD HH:mm') }}
              </a-table-column>
              <a-table-column title="更新时间" #cell="{ record }">
                {{ $setTime(record.gmtWrite, 'YYYY-MM-DD HH:mm') }}
              </a-table-column>
              <a-table-column title="创建人" #cell="{ record }">{{ record.createUname }}</a-table-column>
              <a-table-column title="更新人" #cell="{ record }">{{ record.writeUname }}</a-table-column>
              <a-table-column title="操作" #cell="{ record }" :width="120">
                <a-space>
                  <a-button type="text" @click="show('edit', record)">编辑</a-button>
                  <a-button type="text">日志</a-button>
                  <a-button style="color: red" type="text">删除</a-button>
                </a-space>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <detail v-if="showDetailModal" v-model="showDetailModal" :info="info" :type="type" />
</template>

<script lang="ts" setup>
  import { defineComponent, onMounted, ref } from 'vue'
  import { taskTypeMap } from '../taskMap'
  import { getOrganizesUser } from '@/api/system'
  import { findSettleRulePage } from '@/api/task'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import detail from './components/settlementRuleDetail.vue'

  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    FIX_PICTURE: '以图修图',
    SHOOT_VIDEO: '拍摄视频',
    POSTER_SHOP_DESIGN: '海报设计',
    CHANGE_DIAMOND_COLOR: '换钻调色',
    HAND_DRAWN_DESIGN: '手绘设计',
  }

  const filterItem = ref([
    {
      type: 'select',
      key: 'calMehtod',
      optionItems: [
        { label: '固定价格', value: '1' },
        { label: '按服务费比例', value: '2' },
      ],
      keyWidth: '100',
      value: ref(),
      label: '计算方式',
      width: 180,
    },
    {
      type: 'select',
      key: 'type',
      optionItems: taskTypeMap,
      keyWidth: '100',
      value: ref(),
      label: '任务类型',
      width: 180,
    },
    {
      type: 'select_multiple',
      key: 'applyUserIdList',
      optionItems: [],
      keyWidth: '100',
      value: ref(),
      label: '应用人员',
      width: 180,
    },
    {
      type: 'input_keyword',
      key: 'name',
      keyItems: [
        { label: '规则名称', value: 'name' },
        { label: '规则ID', value: 'shortId' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: '任务ID',
      width: 180,
    },
  ])
  const pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  const tableList = ref([{}])
  const loading = ref(false)
  const info = ref({})
  const searchValue = ref({})
  const type = ref('add')
  const showDetailModal = ref(false)

  const getUSerList = async () => {
    let params = {
      depart: false,
      needRole: false,
      pageNum: 1,
      pageSize: 1000,
    }
    const res: any = await getOrganizesUser(params)
    if (res) {
      let arr = res.data.records || []
      filterItem.value[2].optionItems = arr.map((e) => {
        e.label = e.userName
        e.value = e.id
        return e
      })
    }
  }

  const show = (addType: string, data: any) => {
    type.value = addType
    info.value = data
    showDetailModal.value = true
  }

  const searchByVal = (val: any) => {
    searchValue.value = val
    pageNation.value.pageNum = 1
    getList()
  }
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }
  const getList = async () => {
    let params: any = {
      ...searchValue.value,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    loading.value = true
    const res = await findSettleRulePage(params)
    if (res) {
      tableList.value = res?.data?.records
      pageNation.value.total = res?.data?.total
    }
    loading.value = false
  }

  const getUserName = (data: any) => {
    let arr = data?.applyUserList || []
    return arr.map((e: any) => e.name).join(',')
  }

  const init = () => {
    getUSerList()
    getList()
  }
  onMounted(init)
</script>

<style lang="less" scoped>
  .settlementRule-container {
    height: calc(100vh - @menuHeight);
  }
</style>
